<template>
    <div class="permission">
        <Loading :modal="loading"></Loading>
	    <Tree :data="tree" :render="renderContent"  empty-text=""></Tree>
        <Update ref="update" :callback="getTree"></Update>
    </div>
</template>
<script>
import {Tree,Button,Icon,Tooltip} from 'view-design';

import Update from 'admin/components/config/permission/update';
import Loading from 'admin/components/common/loading';

export default {
	props:{
        callback:{ type : Function}
    },
	components:{
        Tree,
        Button,
        Icon,
        Update,
        Loading,
        Tooltip,
    },
    data () {
        return {
            tree:[],
            params:[],
            loading : true,
            executeUrl: '',
        }
    },
    methods: {
        //获取树形结构数据
        getTree(){
            this.tree = [];
            this.loading = true;
            this.Axios.Config.Permission.Tree(this.params)
            .then(res =>{
                if(!res) return false;
                if(res.code!=0){
                    this.$Message.error(res.msg);
                    return false;
                }
                this.tree = this.formatTree(res.data);
                this.loading = false;
            })
        },
        newPer(){
            this.$refs.update.form.id = 0;
            this.$refs.update.form.name = '';
            this.$refs.update.form.displayName = '';
            this.$refs.update.modal = true;
        },
        //删除分类
        remove(id){
            this.$Modal.confirm({
                title: '你确定要删除当前权限吗?',
                content: '删除会将权限下的子权限一起删除。系统核心功能,请谨慎操作,一旦删除无法恢复,具有删除权限的员工将无法操作',
                onOk: () => {
                    this.Axios.Config.Permission.Del(id)
                    .then(res =>{
                        if(!res) return false;
                        this.getTree();
                    })
                }
            });
        },
        //render tree
        renderContent (h, { root, node, data }) {
            var _this = this;
            return h('div',{}, [
                h('span', [
                    h(Icon, {
                        props: {
                            type: 'md-list'
                        },
                        style: {
                            marginRight: '8px'
                        }
                    }),
                    h('span', data.name+'【'+data.displayName+'】')
                ]),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '15px'
                    }
                }, [
                    h(Button, {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'md-create'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {
                                _this.$refs.update.form.id = data.id;
                                _this.$refs.update.form.name = data.name;
                                _this.$refs.update.form.displayName = data.displayName;
                                _this.$refs.update.modal = true;
                            }
                        }
                    },'更新'),
                    h(Button, {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'md-add'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {
                                _this.$refs.update.form.pid = data.id;
                                _this.$refs.update.modal = true;
                            }
                        }
                    },'添加子权限'),
                    h(Button, {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'md-close'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => { 
                                _this.remove(data.id);
                            }
                        }
                    },'删除权限'),
                ])
            ]);
        },
        //格式化树形结构
        formatTree(data){
            var list = [],_this=this;
            for(var i in data){
                var obj = {};
                if(data[i]['children']!=undefined){
                    var result = _this.formatTree(data[i]['children']);
                    obj.children = result;
                }
                obj.name = data[i]['name'];
                obj.displayName = data[i]['displayName'];
                obj.id = data[i]['id'];
                obj.pid = data[i]['pid'];
                obj.create_admin = data[i]['create_admin'];
                obj.created_at = data[i]['created_at'];
                obj.update_admin = data[i]['update_admin'];
                obj.updated_at = data[i]['updated_at'];
                obj.expand = true;
                if(data[i]['pid']==0){
                    obj.render = function(h, { root, node, data }){
                        return h('div', {}, [
                            h('span', [
                                h(Icon, {
                                    props: {
                                        type: 'md-home'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    }
                                }),
                                h('span', data.name+'【'+data.displayName+'】')
                            ]),
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    float: 'right',
                                    marginRight: '15px'
                                }
                            }, [
                                h(Button, {
                                    props: Object.assign({}, _this.buttonProps, {
                                        icon: 'md-create'
                                    }),
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                            _this.$refs.update.form.id = data.id;
                                            _this.$refs.update.form.name = data.name;
                                            _this.$refs.update.form.displayName = data.displayName;
                                            _this.$refs.update.modal = true;
                                        }
                                    }
                                },'更新'),
                                h(Button, {
                                    props: Object.assign({}, _this.buttonProps, {
                                        icon: 'md-add'
                                    }),
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                            _this.$refs.update.form.pid = data.id;
                                            _this.$refs.update.modal = true;
                                        }
                                    }
                                },'添加子权限'),
                                h(Button, {
                                    props: Object.assign({}, _this.buttonProps, {
                                        icon: 'md-close'
                                    }),
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => { 
                                            _this.remove(data.id);
                                        }
                                    }
                                },'删除权限'),
                            ])
                        ]);
                    }
                }
                list.push(obj);
            }
            return list;
        }
    },
    created:function(){
        this.getTree();
    },
}
</script>
<style>
    .permission .ivu-tree .ivu-tree-title{width: 100%;display:block;height: 35px;line-height: 35px;}
    .permission .ivu-tree .ivu-tree-arrow{display: block;float: left;}
    .permission .ivu-tree ul li {
        border:1px solid #e9eaec;
        padding-top: 5px;
        padding-bottom: 5px;
        box-sizing:border-box;
    }
</style>